<template>
  <div class="itemBlog">
    <el-card :body-style="{ padding: '0px' }" >
      <div class="container">
        <div class="blogImg">
          <a href="#" @click="gotoOneBlog">
            <img :src="blogItem.img"  height="160px" width="281px">
          </a>
        </div>
        <div class="blogMain">
          <div class="padding">
            <div class="detail">
              <div class="time">{{blogItem.time}}</div>
              <div class="category">
                <el-link type="danger" :underline="false"  @click="gotoBlogList">{{ blogItem.category}}</el-link>
              </div>
            </div>
            <el-link :underline="false">
              <h3 class=" animated bounce myH" @click="gotoOneBlog">
                {{blogItem.title}}
              </h3>
            </el-link>
            <p style="font-size: 14px">
              {{blogItem.contail}}
            </p>
            <div class="footer" >
              <div style="display: flex;align-items: center;">
                <i class="el-icon-view" style="font-size: 20px" ></i>
                <span style="margin-left: 10px;">{{blogItem.likeCount}}</span>
              </div>
              <el-button style="border: 2px solid #eaa9bc" @click="gotoOneBlog">详情</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "myIndexOneblog",
  props: {
    blogItem: {
      // img,time,category,title,contail
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
  },
  methods: {
    gotoOneBlog(){
      this.$router.push({ name: 'oneBlog', params: { blogId: this.blogItem.blogId }});
    },
    gotoBlogList(){
      if(this.$route.query.categoryId !== this.blogItem.categoryId){
        this.$router.push({ path: "/blogList", query: { categoryId: this.blogItem.categoryId}});
        this.$emit("queryParam");
      }
    }
  }
}
</script>

<style scoped>

.itemBlog{
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.container{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 5px 5px 5px 5px;
}
.detail{
  display: flex;
  flex-direction: row;
  font-size: 13px;
}
.padding{
  margin: 10px 10px 10px 10px;
}
.time{
  margin-top: 2px;
  font-size: 14px;
}
.category{
  margin-left: 10px;
}
.footer{
  display: flex;
  justify-content: space-between;
  margin: 0px 15% 30px 15%;
}
.blogMain{
  width: 100%;
}
.blogImg{
  width: auto;
}
.myH{
  margin: 5px 0px 0px 0px;
}
</style>
